<template>
    <div class="panel">
        <div class="panel-heading">{{unlockTitle}}</div>
        <div class="panel-block control-set">
            <div class="columns is-gapless password" :class="statePrompt">
                <div class="column">
                    <span class="icon">
                        <i class="fa" :class="[has(1)?'fa-circle':'fa-circle-thin']"></i>
                    </span>
                </div>
                <div class="column">
                    <span class="icon">
                        <i class="fa" :class="[has(2)?'fa-circle':'fa-circle-thin']"></i>
                    </span>
                </div>
                <div class="column">
                    <span class="icon">
                        <i class="fa" :class="[has(3)?'fa-circle':'fa-circle-thin']"></i>
                    </span>
                </div>
                <div class="column">
                    <span class="icon">
                        <i class="fa" :class="[has(4)?'fa-circle':'fa-circle-thin']"></i>
                    </span>
                </div>
            </div>
            <div class="columns">
                <div class="column">
                    <button class="button" @click="input(1)">1</button>
                </div>
                <div class="column">
                    <button class="button" @click="input(2)">2</button>
                </div>
                <div class="column">
                    <button class="button" @click="input(3)">3</button>
                </div>
            </div>
            <div class="columns">
                <div class="column">
                    <button class="button" @click="input(4)">4</button>
                </div>
                <div class="column">
                    <button class="button" @click="input(5)">5</button>
                </div>
                <div class="column">
                    <button class="button" @click="input(6)">6</button>
                </div>
            </div>
            <div class="columns">
                <div class="column">
                    <button class="button" @click="input(7)">7</button>
                </div>
                <div class="column">
                    <button class="button" @click="input(8)">8</button>
                </div>
                <div class="column">
                    <button class="button" @click="input(9)">9</button>
                </div>
            </div>
            <div class="columns">
                <div class="column">
                    <button class="button" @click="repassword">
                        <span class="icon">
                            <i class="fa fa-key"></i>
                        </span>
                    </button>
                </div>
                <div class="column">
                    <button class="button" @click="input(0)">0</button>
                </div>
                <div class="column">
                    <button class="button" @click="resetCurrent">
                        <span class="icon">
                            <i class="fa fa-refresh"></i>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.control-set {
    background-color: white;
    flex-direction: column;
}

.columns {
    width: 100%;
    justify-content: center;
    .column {
        padding: 0.2rem;
        text-align: center;
        button {
            width: 100%;
        }
    }
    &:not(:last-child) {
        margin-bottom: calc(1rem - 0.2rem);
    }
    &:last-child {
        margin-bottom: -0.2rem;
    }
    &.password {
        margin: 0 0.5rem;
        margin-bottom: calc(1rem - 0.2rem);
        font-size: 200%;
        .column {
            flex-grow: 0;
            margin: 0 0.5rem;
        }
    }
}
</style>

<script>
import { mapState } from 'vuex';
import _ from 'lodash';

export default {
    data() {
        return {
            mode: 0,
            correct: false,
            wrong: false,
            onceIn: [],
            currentInput: []
        };
    },
    computed: {
        ...mapState({
            pin: state => _.split(state.App.pin, '').map(_.parseInt)
        }),
        unlockTitle() {
            switch (this.mode) {
                case 0:
                    return '输入PIN码解锁';
                case 1:
                    return '输入原始PIN码';
                case 2:
                    return '输入新PIN码';
                case 3:
                    return '再次输入新PIN码';
            }
        },
        statePrompt() {
            return [{ 'has-text-grey-lighter': !this.wrong && !this.correct }, { 'has-text-danger': this.wrong }, { 'has-text-success': this.correct }];
        }
    },
    watch: {
        currentInput(newValue) {
            if (newValue.length == 4) {
                switch (this.mode) {
                    case 0:
                        if (_.difference(newValue, this.pin).length > 0) {
                            this.errorReset();
                            break;
                        }
                        this.correctReset(() => this.$emit('unlock-granted', null));
                        break;
                    case 1:
                        if (_.difference(newValue, this.pin).length > 0) {
                            this.errorReset();
                            break;
                        }
                        this.correctReset(() => this.mode++);
                        break;
                    case 2:
                        this.onceIn = _.clone(this.currentInput);
                        this.correctReset(() => this.mode++);
                        break;
                    case 3:
                        if (_.difference(newValue, this.onceIn).length > 0) {
                            this.errorReset();
                            break;
                        }
                        this.correctReset(() => {
                            this.$store.dispatch('saveNewPin', { pin: _.join(this.onceIn, '') });
                            this.mode = 0;
                        });
                        break;
                }
            }
        }
    },
    methods: {
        input(n) {
            if (this.currentInput.length < 4) {
                this.currentInput.push(n);
            }
        },
        resetCurrent() {
            this.currentInput = [];
        },
        errorReset() {
            this.wrong = true;
            _.delay(() => {
                this.wrong = false;
                this.resetCurrent();
            }, 1000);
        },
        correctReset(cb) {
            this.correct = true;
            _.delay(() => {
                this.correct = false;
                this.resetCurrent();
                if (_.isFunction(cb)) cb.call(this);
            }, 1000);
        },
        has(n) {
            return this.currentInput.length >= n;
        },
        repassword() {
            if (_.eq(this.mode, 0)) this.mode = 1;
        }
    }
}
</script>

